import React from "react"

export default class Demo extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0,
            msg: 'hello component'
        }
    }
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <h3>{this.state.msg}</h3>
                <button onClick={
                    () => {
                        // 🐷 如果多次调用setState，如果参数为对象，则合并，渲染的时候再覆盖
                        //                      如果参数为函数，则不会合并
                        this.setState({
                            count: this.state.count + 10,
                            msg: 'xxx',
                        })
                        // this.setState({
                        //     count:this.state.count + 20,
                        // })
                        // this.setState({
                        //     count:this.state.count + 30,
                        // })
                        // 😜 执行结果为 30 和 xxx 
                        // 相当于
                        // this.setState({
                        //     count:this.state.count + 10,
                        //     msg:'xxx',
                        //     count:this.state.count + 20,
                        //     count:this.state.count + 30,
                        // })
                        this.setState((state) => {
                            return {
                                count: state.count + 20,
                            }
                        })
                        this.setState((state) => {
                            return {
                                count: state.count + 30,
                            }
                        })
                    }
                }>
                    +
                </button>
            </div>
        )
    }
}